PR 4/10 — Port settings service to a React context - #756

Summary

Part of the Angular → React migration chain; based on devin-09.08.2026-devanshi/port-hackernews-data-layer.

Ports src/app/shared/services/settings.service.ts to react-app/src/context/SettingsContext.tsx (SettingsProvider + useSettings(), which throws outside the provider). Same localStorage keys/defaults and the same persistence behaviour per setter; showSettings stays in memory only.

The one non-mechanical part is initTheme: Angular re-dispatched a synthetic MediaQueryListEvent to reuse its change handler. Here the effect calls the same handler directly with the MediaQueryList when no theme is saved, so the mount path and the change path share one code path without faking an event:

const handleChange = (event: MediaQueryListEvent | MediaQueryList) =>
    setTheme(event.matches ? 'night' : 'default');
media.addEventListener('change', handleChange);
if (!localStorage.getItem('theme')) handleChange(media);
return () => media.removeEventListener('change', handleChange);

Note the saved theme is read in the initial state (Angular hardcoded 'default' then overwrote it in initTheme), so no first-render flash of the wrong theme.

Proposed fixes

• react-app/src/context/SettingsContext.tsx: provider with toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing; memoised context value.
• react-app/src/context/SettingsContext.test.tsx: vitest coverage for defaults, localStorage reads/writes, showSettings not persisted, saved theme winning over the system preference, live prefers-color-scheme changes, and listener cleanup on unmount (window.matchMedia is stubbed — jsdom has no implementation).

npm run typecheck, npm run build, npm run lint and npm test pass in react-app/.

Link to Devin session: https://app.devin.ai/sessions/451b5e68d2dc4745ba01847041b9c0af
Open in Devin Desktop: https://app.devin.ai/desktop/session/451b5e68d2dc4745ba01847041b9c0af?variant=devin
Requested by: @devanshi-gpta